<template>
  <div class="city">
    <App-header>
      <img slot="title" @click="prev" src="../assets/上一步.png" alt="">
      <p slot="city">{{$route.query.cityName}}</p>
      <span @click="prev" slot="login">切换城市</span>
    </App-header>
    <form class="cityFrom" action="get" @submit.prevent="onSubmit">
      <div class="searchCity">
        <input type="search" v-model="search" required placeholder="输入学校、商务楼、地址" class="citySearch__item">
      </div>
      <input @click="subBtn" type="submit" name="subBtn" value="提交" class="citySubmit">
    </form>
    <div class="searchHistory" v-if="historyIsDisplay">
      搜索历史
    </div>
    <div class="searchList">
      <div @click="blockHistory(index , item.geohash)" class="searchList__item" v-for="(item, index) in searchArr" :key="index">
        <router-link class="router_link" :to="{ name: 'Shopping', query: { address: item.name, latitude: item.latitude, longitude: item.longitude, geohash: item.geohash } }">
          <h4>{{item.name}}</h4>
          <p>{{item.address}}</p>
        </router-link>
      </div>
    </div>
    <div @click='clearHistory' v-if="historyIsDisplay  &&  (searchArr !== undefined && searchArr.length > 0)" class="allClear">清空所有</div>
  </div>
</template>

<script>
import AppHeader from './AppHeader.vue'
import {message} from './co-message'

export default {
  name: 'City',
  data () {
    return {
      search: '',
      searchArr: [],
      historyIsDisplay: true,
      clearArr: []
    }
  },
  methods: {
    onSubmit () {
      return false
    },
    prev () {
      this.$router.push({ name: 'Home' })
    },
    subBtn (e) {
      if (this.search.length === 0) {
        message({
          message: '请输入搜索内容',
          type: 'error'
        })
      } else {
        this.$http.searchCity({
          type: 'search',
          city_id: this.$route.query.city,
          keyword: this.search
        }).then(res => {
          window.console.log(res.data)
          this.searchArr = res.data
          this.historyIsDisplay = false
        }).catch(err => {
          window.console.log(err)
        })
      }
    },
    initData () {
      // 获取搜索历史记录
      if (this.$storage.getStore('clearArr')) {
        this.searchArr = JSON.parse(this.$storage.getStore('clearArr'))
      } else {
        this.searchArr = []
      }
    },
    blockHistory (index, geohash) {
      const history = this.$storage.getStore('clearArr')
      const chosePlace = this.searchArr[index]
      if (history) {
        let checkrepeat = false
        this.clearArr = JSON.parse(history)
        this.clearArr.forEach((item) => {
          if (item.geohash === geohash) {
            checkrepeat = true
          }
        })
        if (!checkrepeat) {
          this.clearArr.push(chosePlace)
        }
      } else {
        this.clearArr.push(chosePlace)
      }
      this.$storage.setStore('clearArr', this.clearArr)
      this.historyIsDisplay = false
    },
    clearHistory () {
      this.$storage.removeStore('clearArr')
      this.initData()
    }
  },
  components: { AppHeader },
  created () {
    this.initData()
  }
}
</script>

<style scoped lang="scss">
  *{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
  }
  .city{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    .cityFrom{
      width: 100%;
      height: 200px;
      border-top: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      margin-top: 17px;
      background-color: #fff;
      .searchCity{
        width: 90%;
        height: 115px;
        margin: 0px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .citySearch__item{
          width: 100%;
          height: 64px;
          padding: 10px;
          border: 1px solid #e4e4e4;
          border-radius: 4px;
          font-size: 28px;
          outline: none;
        }
      }
      .citySubmit{
        width: 90%;
        height: 66px;
        display: block;
        margin: 0px auto 17px;
        list-style: none;
        font-style: normal;
        text-decoration: none;
        border: none;
        font-size: 31px;
        border-radius: 4px;
        color: #fff;
        background-color: #3190e8;
      }
    }
    .searchHistory{
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      font-size: 22px;
      border-bottom: 3px solid #e4e4e4;
      border-top: 2px solid #e4e4e4;
    }
    .allClear{
      width: 100%;
      height: 100px;
      background-color: #fff;
      line-height: 100px;
      text-align: center;
    }
    .searchList{
      width: 100%;
      background-color: #fff;
      .searchList__item{
        width: 100%;
        height: 110px;
        overflow: hidden;
        padding: 35px 0px 0px;
        border-bottom: 1px solid #e4e4e4;
        h4{
          width: 90%;
          height: 40px;
          margin: 0px auto 25px;
          font-size: 30px;
          color: #333;
          font-weight: unset;
        }
        p{
          width: 90%;
          height: 30px;
          overflow: hidden;
          margin: 0px auto 25px;
          font-size: 25px;
          color: #9d9d9d;
        }
      }
    }
  }
</style>
